.market {
  @apply w-screen h-screen;
  font-family: Alibaba PuHuiTi 2.0;

  .p1 {
    @apply w-full flex items-center justify-center relative flex-col;
    height: 50vw;
    background-image: url('/images/market-pc-bg.webp');
    background-size: 100% 100%;

    .title {
      @apply leading-7 font-extrabold;
      font-size: 28px;
      color: #EEEEEE;
    }

    .tips {
      @apply leading-7 font-semibold text-base leading-4 my-5;
      color: #EEEEEE;
    }

    .inputBox {
      @apply h-10;

      input {
        @apply h-full rounded bg-white text-base font-medium px-3;
        border: 2px solid transparent;
        width: 260px;
        margin-right: 10px;
        color: #999;

        &.errInput {
          border-color: red;
          // animation: pink 0.4s ease infinite ;
        }

        @keyframes pink {
          0% {
            border-color: red;
          }

          100% {
            border-color: transparent
          }
        }

        &:focus {
          @apply bg-white;
          border-color: var(--theme-color);
        }
      }

      .btn {
        @apply text-white font-medium text-base h-full;
        width: 100px;
        background: linear-gradient(90deg, #FFB521 0%, #FF651D 100%);

        &:hover {
          @apply bg-theme;
        }
      }
    }

    .b {
      @apply text-base text-white-60;
      font-family: PingFang SC;
      margin-top: 10px;
      width: 366px;
    }

    .head {
      @apply h-20 w-full flex items-center absolute left-0 top-0 z-10 ;
      background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
      
      &>img {
        @apply h-6 cursor-pointer;
        margin-left: 100px;
      }
    }
  }

  .itemBox {
    @apply flex justify-center;
    padding: 64px 0;
    border-top: 5px solid #333;

    .textBox {
      @apply flex justify-center flex-col;
      height: 200px;
      width: 290px;

      p {
        @apply font-extrabold;
        color: #eee;

        &:nth-child(1) {
          font-size: 28px
        }

        &:nth-child(2) {
          @apply text-base leading-6 mt-5;
        }
      }
    }

    img {
      height: 200px;
      width: 290px;
    }

  }

  .look {
    @apply w-full flex flex-col items-center justify-center;
    border-top: 5px solid #333;
    padding-top: 90px;
    padding-bottom: 90px;
    border-bottom: 5px solid #333;

    .title {
      @apply text-lg font-semibold;
      line-height: 18px;
      color: #EEEEEE;
    }

    .tips {
      @apply leading-7 font-semibold text-base leading-4 my-5;
      color: #EEEEEE;
    }

    .inputBox {
      @apply h-10 my-5;

      input {
        @apply h-full rounded bg-white text-base font-medium px-3;
        border: 3px solid transparent;
        width: 260px;
        margin-right: 10px;
        color: #999;

        &.errInput {
          border-color: red;
          // animation: pink 0.4s ease infinite ;
        }

        &:focus {
          @apply bg-white;
          border-color: var(--theme-color);
        }
      }

      .btn {
        @apply text-white font-medium text-base h-full;
        width: 100px;
        background: linear-gradient(90deg, #FFB521 0%, #FF651D 100%);

        &:hover {
          @apply bg-theme;
        }
      }
    }

    .b {
      @apply text-base text-white-60;
      font-family: PingFang SC;
      margin-top: 10px;
      width: 366px;
    }

    .btnBox {
      @apply flex;
      margin-top: 10px;

      .btn {
        @apply h-10 text-white;
        width: 210px;
        background: #2A2A31;
        margin-right: 10px;

        span {
          @apply font-medium;
          color: #EEEEEE;
        }

        &.btn1 {
          background: linear-gradient(279deg, #70301F 0%, #313D4C 100%);
        }
      }
    }
  }

  .guide {
    @apply mx-auto;
    max-width: 700px;
    padding: 65px 0;
    color: #EEEEEE;

    .title {
      @apply font-semibold text-xl leading-5 mb-5 text-center;
    }

    .label {
      @apply font-medium mb-5 text-base leading-4;
      font-family: PingFang SC;
      margin-bottom: 10px;
    }

    .item {
      @apply text-sm leading-8;

      span {
        &:nth-child(1) {}

        &:nth-child(2) {
          color: rgba(255, 255, 255, 0.7)
        }
      }
    }
  }



  .login {
    @apply w-full h-full relative ;

    .h5Bg {
      @apply absolute left-0 top-0 w-full;
    }

    .head {
      @apply h-20 w-full flex items-center absolute left-0 top-0 z-10;
      background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);

      &>img {
        @apply h-6 cursor-pointer;
        margin-left: 100px;
      }
    }

    .back {
      @apply absolute flex items-center z-10 cursor-pointer;
      left: 100px;
      top: 100px;

      img {
        @apply h-7 w-7 mr-2;
        transform: rotate(-90deg)
      }

      span {
        @apply text-base;
        color: #AAAAAA;
      }
    }
    .loginContent{
      @apply w-full h-full left-0 top-0 absolute flex items-center justify-center flex-col z-4 ;
    }
  }

  .loginSuccess {
    @apply w-full h-full flex items-center justify-center relative flex-col;

    .h5Bg {
      @apply absolute left-0 top-0 w-full;
    }

    .succTitle {
      @apply flex items-center;

      span {
        @apply text-xl leading-6 font-bold;
        margin: 0 18px;
        font-family: Alimama ShuHeiTi;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        background: linear-gradient(90deg, #FFF5EF 0%, #FFDCC3 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }

      img {
        height: 6px;

        &.right {
          transform: rotate(180deg)
        }
      }
    }

    .head {
      @apply h-20 w-full flex items-center absolute left-0 top-0 z-10 ;
      background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);

      &>img {
        @apply h-6 cursor-pointer;
        margin-left: 100px;
      }
    }

    .back {
      @apply absolute flex items-center z-2 cursor-pointer;
      left: 100px;
      top: 100px;

      img {
        @apply h-7 w-7 mr-2;
        transform: rotate(-90deg)
      }

      span {
        @apply text-base;
        color: #AAAAAA;
      }
    }

    .btnBox {
      @apply flex;
      margin-top: 20px;

      .btn {
        @apply h-10 text-white;
        width: 210px;
        background: linear-gradient(279deg, #70301F 0%, #313D4C 100%);
        margin-right: 10px;

        span {
          @apply font-medium;
          color: #EEEEEE;
        }


      }
    }

    .down {
      @apply flex;
      margin-top: 90px;

      .phone {
        width: 54px;
        height: 120px;
        margin-right: 40px
      }

      .tv {
        width: 180px;
        height: 120px;
        margin-right: 40px
      }

      .bb {
        @apply flex justify-center flex-col;
        height: 120px;

      }

      .text {
        @apply text-white font-semibold text-base leading-4;
        margin-bottom: 20px;
      }

      .btn {
        @apply bg-theme text-white;
        width: 120px;
        height: 30px;
        border-radius: 30px;
      }
    }
  }

}


@media screen and (max-width:767px) {
  .market {
    &.marketPhone {
      .p1 {
        @apply items-start;
        padding: 0 30px;
        height: 120vw;
        background-image: url('/images/h5-head-bg.webp');

        .title {
          @apply leading-8 text-2xl;
          font-family: Alimama ShuHeiTi;
        }

        .tips {
          @apply text-xs;
        }

        .inputBox {
          @apply w-full;

          input {
            @apply w-full mr-0;
          }

          .btn {
            @apply w-full;
            margin-top: 18px;
          }
        }

        .b {
          @apply hidden;
        }

        .head {
          &>img {
            margin-left: 30px;
          }
        }
      }

      .itemBox {
        @apply flex-col items-center;
        padding: 40px 30px;

        .textBox {
          @apply h-auto mt-5;
          order: 2;

          p {
            @apply text-center;

            &:nth-child(2) {
              @apply text-xs leading-5;
            }
          }
        }

        img {
          @apply m-0 h-auto w-full;
        }

      }

      .look {
        padding: 60px 30px;

        .title {
          @apply text-sm leading-4;
        }

        .tips {
          @apply text-xs leading-3;
        }

        .inputBox {
          @apply w-full h-auto;

          input {
            @apply w-full mr-0 h-10;
          }

          .btn {
            @apply w-full h-10;
            margin-top: 18px;
          }
        }

        .btnBox {
          @apply w-full;

          .btn {
            @apply flex-1 text-xs;

            &.btn1 {
              background: #2A2A31;
            }
          }
        }
      }

      .guide {
        @apply w-full;
        padding: 65px 14px;

        .label {
          margin-top: 10px;
        }

        .item {
          @apply text-xs leading-6;

          span {
            &:nth-child(1) {
              @apply text-xs;
            }
          }
        }
      }



      .login {
        .h5Bg {
          @apply z-0 ;
          height: 76vw;
        }

        .head {
          &>img {
            margin-left: 30px;
          }
        }

        .back {
          @apply  top-20 ;
          left: 30px;
        }
      }

      .loginSuccess {
        padding: 0 30px;

        .h5Bg {
          height: 76vw;
        }

        .succTitle {
          img {
            @apply hidden;
          }
        }

        .head {
          &>img {
            margin-left: 30px;
          }
        }

        .back {
          @apply top-20;
          left: 30px;
        }

        .btnBox {
          @apply mt-5;
        }

        .down {
          @apply justify-center;

          .dvh5 {
            @apply flex-col items-center shrink-0;
            width: 120px;

            .text {
              @apply whitespace-nowrap;
            }

            &:nth-child(2) {
              margin-left: 40px !important
            }
          }

          .phone {
            @apply mr-0;
          }

          .tv {
            @apply mr-0 my-5;
            width: 124px;
            height: 82px;
          }
        }
      }

    }
  }
}